<script setup lang="ts">
  import { ref } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon';
  import DemoDetailDrawer from './detail-drawer.vue';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';

  // 表格列定义
  const columns = [
    {
      title: '项目ID',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '所属分类',
      dataIndex: 'serviceCatName',
      width: 150,
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '项目状态',
      dataIndex: 'status',
      width: 120,
      render: ({ record }: any) => {
        return record.status === 1 ? '启用' : '禁用';
      },
    },
    {
      title: '使用人数',
      dataIndex: 'userCount',
      width: 120,
    },
    {
      title: '收费标准',
      dataIndex: 'priceModelName',
      width: 150,
    },
    {
      title: '项目单价（元）',
      dataIndex: 'price',
      width: 150,
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 120,
    },
  ];

  // 模拟数据
  const mockData = [
    {
      id: 1130,
      parentId: null,
      serviceCatId: 29,
      serviceCatName: '健康管理',
      name: '血项测量',
      status: 1,
      statusName: null,
      priceModel: null,
      priceModelName: null,
      price: '30.00',
      duration: 10,
      description: null,
      note: '血脂、尿酸、甘油三酯',
      equipmentNote: '多功能检测仪',
      multServices: 0,
      orders: 0,
      userCount: 120,
      createdAt: '2025-10-26 16:34',
      updatedAt: '2025-10-26 16:34',
    },
    {
      id: 1131,
      parentId: null,
      serviceCatId: 30,
      serviceCatName: '康复训练',
      name: '物理治疗',
      status: 1,
      statusName: null,
      priceModel: null,
      priceModelName: null,
      price: '50.00',
      duration: 30,
      description: null,
      note: '专业物理治疗师指导',
      equipmentNote: '康复训练设备',
      multServices: 0,
      orders: 0,
      userCount: 85,
      createdAt: '2025-10-27 10:15',
      updatedAt: '2025-10-27 10:15',
    },
  ];

  // 使用分页表格hook
  const page = usePageTable({
    table: {
      apiFun: (params: any) => {
        // 模拟API调用
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              list: mockData,
              total: mockData.length,
            });
          }, 500);
        });
      },
      columns,
    },
    searchForm: {
      state: {
        name: '',
      },
    },
  });

  // 使用mode modal handler
  const modalHandler = useModeModalHandler({
    onSuccess() {
      // 重新加载数据
      page.reload();
    },
  });

  // 显示新增弹窗
  const handleAdd = () => {
    modalHandler.showAdd();
  };

  // 显示编辑弹窗
  const handleEdit = (record: any) => {
    modalHandler.showEdit(record);
  };

  // 显示详情弹窗
  const handleDetail = (record: any) => {
    modalHandler.showDetail(record);
  };
</script>

<template>
  <div>
    <TableLayout v-bind="page.bindProps" @create="handleAdd">
      <template #searchForm="{ state }">
        <a-form-item field="name" label="项目名称">
          <a-input
            v-model="state.name"
            placeholder="请输入项目名称"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button size="small" type="text" @click="handleDetail(record)">
            查看
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <DemoDetailDrawer v-bind="modalHandler.bindProps" />
  </div>
</template>

<style lang="less" scoped>
  .form-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
  }
</style>
